<template>
	<el-card class="form-container">
		<el-form :model="addForm" ref="addForm" :rules="dataRule"  @keyup.enter.native="dataFormSubmitHandle()" label-width="90px">
			<el-form-item label="角色名称" prop="roleName">
				<el-input v-model="addForm.roleName"  placeholder="请输入角色名称"></el-input>
			</el-form-item>
			<el-form-item label="角色状态" prop="roleStatus">
				<el-radio-group v-model="addForm.roleStatus">
					<el-radio label="1">启用</el-radio>
					<el-radio label="2">禁用</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="角色描述" prop="roleDesc">
				<el-input type="textarea" v-model="addForm.roleDesc"  placeholder="请输入角色描述"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary"  @click="submit('addForm')">确定</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>
<script>
import { addSystemRole ,validataRoleExist } from '@/api/admin/systemRole'	
export default{
	data(){
		var validateRoleName = (rule, value, callback) =>{
			validataRoleExist(value).then(() =>{
				callback();
			}).catch((err) => {
				return callback(new Error(err.data.responseMessage));
			});
		};
		return{
			addForm: {
				roleName: '',
				roleStatus: '',
				roleDesc: '',
			},
			dataRule:{
				roleName: [
					{ required: true, message: '请输入角色名', trigger: 'blur'},
					{validator: validateRoleName, trigger: 'blur' }
				],
			}
		}
	},
	methods: {
		submit(){
			this.$refs['addForm'].validate((valid) => {
				if (!valid) {
					return false
				}
				addSystemRole(this.addForm).then(() => {
					this.$notify({
						title: '添加成功',
						message: '添加角色成功',
						type: 'success',
						duration: 2000,
						onClose: this.$router.go(-1)
					})
				})
			})
		},
		cancel(){
			this.$router.go(-1)
		}
	}
}
</script>

<style>
</style>
